Las respuestas de esta pregunta son un esfuerzo comunitario. Edite las respuestas existentes para mejorar esta publicación. Actualmente no acepta nuevas respuestas o interacciones. ¿Cómo puedo redirigir al usuario de una página a otra usando jQuery o JavaScript puro?
1
2
Siguiente
Uno no simplemente redirige usando jQuery
jQuery no es necesario y window.location.replace (...) simulará mejor una redirección HTTP.
window.location.replace (...) es mejor que usar window.location.href, porque replace () no mantiene la página de origen en el historial de la sesión, lo que significa que el usuario no se quedará atascado en un back- botón fiasco.
Si desea simular que alguien hace clic en un enlace, utilice
location.href
Si desea simular una redirección HTTP, use location.replace
Por ejemplo:
// comportamiento similar al de un redireccionamiento HTTP
window.location.replace ("http://stackoverflow.com");
// comportamiento similar a hacer clic en un enlace
window.location.href = "http://stackoverflow.com";
|
ADVERTENCIA: Esta respuesta se ha proporcionado simplemente como una posible solución; obviamente no es la mejor solución, ya que requiere jQuery. En su lugar, prefiera la solución de JavaScript pura.
$ (ubicación) .attr ('href', 'http://stackoverflow.com')
|
Forma estándar de JavaScript "básica" para redirigir una página
window.location.href = 'newPage.html';
O más simplemente: (ya que la ventana es global)
location.href = 'newPage.html';
Si estás aquí porque estás perdiendo HTTP_REFERER al redirigir, sigue leyendo:
(De lo contrario ignore esta última parte)
La siguiente sección es para aquellos que usan HTTP_REFERER como una de las muchas medidas de seguridad (aunque no es una gran medida de protección). Si está utilizando Internet Explorer 8 o versiones anteriores, estas variables se pierden al utilizar cualquier forma de redireccionamiento de páginas de JavaScript (location.href, etc.).
A continuación vamos a implementar una alternativa para IE8 y versiones inferiores para que no perdamos HTTP_REFERER. De lo contrario, casi siempre puede usar simplemente window.location.href.
Las pruebas con HTTP_REFERER (pegado de URL, sesión, etc.) pueden ayudar a determinar si una solicitud es legítima.
(Nota: también hay formas de evitar / falsificar estas referencias, como se indica en el enlace de droop en los comentarios)
Solución simple de prueba entre navegadores (alternativa a window.location.href para Internet Explorer 9+ y todos los demás navegadores)
Uso: redirect ('anotherpage.aspx');
función de redireccionamiento (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
versión = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 y versiones anteriores
if (isIE && versión <9) {
var link = document.createElement ('a');
link.href = url;
document.body.appendChild (enlace);
link.click ();
}
// Todos los demás navegadores pueden usar el estándar window.location.href (no pierden HTTP_REFERER como lo hace Internet Explorer 8 y versiones inferiores)
else {
window.location.href = url;
}
}
|
Hay muchas formas de hacer esto.
// window.location
window.location.replace ('http://www.example.com')
window.location.assign ('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/ ruta'
// window.history
window.history.back ()
window.history.go (-1)
// window.navigate; SOLO para versiones antiguas de Internet Explorer
window.navigate ('top.jsp')
// Probablemente no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (ubicación) .attr ('href', 'http: //www.example.com')
$ (ventana) .attr ('ubicación', 'http: //www.example.com')
$ (ubicación) .prop ('href', 'http://www.example.com')
|
Esto funciona para todos los navegadores:
window.location.href = 'tu_url';
|
Sería útil que fuera un poco más descriptivo en lo que está tratando de hacer. Si está intentando generar datos paginados, existen algunas opciones para hacerlo. Puede generar enlaces separados para cada página a la que desea poder acceder directamente.
1
2
3
...
Tenga en cuenta que la página actual en el ejemplo se maneja de manera diferente en el código y con CSS.
Si desea que los datos paginados se cambien a través de AJAX, aquí es donde entraría jQuery. Lo que haría es agregar un controlador de clic a cada una de las etiquetas de anclaje correspondientes a una página diferente. Este controlador de clic invocaría un código jQuery que busca la página siguiente a través de AJAX y actualiza la tabla con los nuevos datos. El siguiente ejemplo asume que tiene un servicio web que devuelve los datos de la nueva página.
$ (documento) .ready (function () {
$ ('a.pager-link'). click (function () {
var page = $ (esto) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
tipo: 'POST',
url: '/ ruta al servicio',
datos: página,
éxito: función (contenido) {
$ ('# myTable'). html (contenido); // reemplazar
}
});
falso retorno; // para detener el enlace
});
});
|
También creo que location.replace (URL) es la mejor manera, pero si desea notificar a los motores de búsqueda sobre su redirección (no analizan el código JavaScript para ver la redirección), debe agregar la meta rel = "canonical" etiqueta a su sitio web.
Agregar una sección noscript con una metaetiqueta de actualización de HTML en ella también es una buena solución. Le sugiero que utilice esta herramienta de redirección de JavaScript paracrear redirecciones. También tiene soporte para Internet Explorer para pasar la referencia HTTP.
El código de muestra sin demora se ve así:
|
Pero si alguien quiere redirigir a la página de inicio, puede usar el siguiente fragmento.
window.location = window.location.host
Sería útil si tiene tres entornos diferentes como desarrollo, preparación y producción.
Puede explorar este objeto window o window.location simplemente poniendo estas palabras en Chrome Console o Firebug's Console.
|
JavaScript le proporciona muchos métodos para recuperar y cambiar la URL actual que se muestra en la barra de direcciones del navegador. Todos estos métodos utilizan el objeto Location, que es una propiedad del objeto Window. Puede crear un nuevo objeto de ubicación que tenga la URL actual de la siguiente manera ...
var currentLocation = window.location;
Estructura básica de una URL
//:/
Protocolo: especifica el nombre del protocolo que se utilizará para acceder al recurso en Internet. (HTTP (sin SSL) o HTTPS (con SSL))
nombre de host: el nombre de host especifica el host que posee el recurso. Por ejemplo, www.stackoverflow.com. Un servidor proporciona servicios utilizando el nombre del host.
puerto: un número de puerto que se utiliza para reconocer un proceso específico al que se debe reenviar un mensaje de Internet u otro mensaje de red cuando llega a un servidor.
nombre de ruta: la ruta brinda información sobre el recurso específico dentro del host al que el cliente web desea acceder. Por ejemplo, stackoverflow.com/index.html.
consulta: una cadena de consulta sigue el componente de ruta y proporciona una cadena de información que el recurso puede utilizar para algún propósito (por ejemplo, como parámetros para una búsqueda o como datos para procesar).
hash: la parte de anclaje de una URL, incluye el signo de almohadilla (#).
Con estas propiedades del objeto de ubicación, puede acceder a todos estos componentes de URL
hash: establece o devuelve la parte de anclaje de una URL.
host -Conjuntos
o devuelve el nombre de host y el puerto de una URL.
hostname -Sets o
devuelve el nombre de host de una URL.
href: establece o devuelve el
URL.
nombre de ruta: establece o devuelve el nombre de ruta de una URL.
puerto: establece o devuelve el número de puerto que utiliza el servidor para una URL.
protocolo: establece o devuelve el protocolo de una URL.
búsqueda -Conjuntos
o devuelve la parte de consulta de una URL
Ahora, si desea cambiar una página o redirigir al usuario a otra página, puede usar la propiedad href del objeto Ubicación de esta manera
Puede utilizar la propiedad href del objeto Location.
window.location.href = "http://www.stackoverflow.com";
El objeto de ubicación también tiene estos tres métodos
asignar (): carga un nuevo documento.
reload (): vuelve a cargar el documento actual.
replace (): reemplaza el documento actual por uno nuevo
Puede usar los métodos asignar () y reemplazar también para redirigir a otras páginas como estas
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
En qué difiere asignar () y reemplazar (): la diferencia entre el método reemplazar () y el método asignar () () es que reemplazar () elimina la URL del documento actual del historial del documento, lo que significa que no es posible usar el botón "atrás" para navegar de regreso al documento original. Por lo tanto, use el método assign () si desea cargar un nuevo documento y desea dar la opción de navegar de regreso al documento original.
Puede cambiar la propiedad href del objeto de ubicación usando jQuery también así
$ (ubicación) .attr ('href', url);
Y, por lo tanto, puede redirigir al usuario a otra URL.
|
Básicamente, jQuery es solo un marco de JavaScript y para hacer algunas de las cosas como la redirección en este caso, puede usar JavaScript puro, por lo que en ese caso tiene 3 opciones usando vainillaJavaScript:
1) Al usar reemplazo de ubicación, esto reemplazará el historial actual de la página, lo que significa que no es posible usar el botón Atrás para volver a la página original.
window.location.replace ("http://stackoverflow.com");
2) Usando la asignación de ubicación, esto mantendrá el historial para usted y con el botón de retroceso, puede volver a la página original:
window.location.assign ("http://stackoverflow.com");
3) Recomiendo usar una de esas formas anteriores, pero esta podría ser la tercera opción usando JavaScript puro:
window.location.href = "http://stackoverflow.com";
También puede escribir una función en jQuery para manejarlo, pero no se recomienda ya que solo es una función de JavaScript pura de una línea, también puede usar todas las funciones anteriores sin ventana si ya está en el alcance de la ventana, por ejemplo, window.location.replace ("http://stackoverflow.com"); podría ser location.replace ("http://stackoverflow.com");
También los muestro todos en la imagen de abajo:
|
Debería poder configurarlo usando window.location.
Ejemplo:
window.location = "https://stackoverflow.com/";
Aquí hay una publicación anterior sobre el tema: ¿Cómo redirecciono a otra página web?
|
Antes de comenzar, jQuery es una biblioteca de JavaScript utilizada para la manipulación de DOM. Por lo tanto, no debería usar jQuery para una redirección de página.
Una cita de Jquery.com:
Si bien jQuery puede ejecutarse sin problemas importantes en versiones anteriores del navegador,
no probamos activamente jQuery en ellos y generalmente no corregimos errores
que pueda aparecer en ellos.
Fue encontrado aquí:
https://jquery.com/browser-support/
Por lo tanto, jQuery no es una solución definitiva para la compatibilidad con versiones anteriores.
La siguiente solución que utiliza JavaScript sin formato funciona en todos los navegadores y ha sido estándar durante mucho tiempo, por lo que no necesita ninguna biblioteca para la compatibilidad con varios navegadores.
Esta página se redireccionará a Google después de 3000 milisegundos.
ejemplo
Será redirigido a Google en breve.